<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">统计数据管理</el-breadcrumb-item>
		<el-breadcrumb-item><a href="/">公众监督数据列表</a></el-breadcrumb-item>
	</el-breadcrumb>
	<el-descriptions class="margin-top" title="公众监督数据详情" :column="1" border>
		<template #extra>
			<el-button type="primary">返回</el-button>
		</template>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<user />
					</el-icon>
					空气质量检测总数量
				</div>
			</template>
			{{other.sum}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<user />
					</el-icon>
					空气质量检测良好数量
				</div>
			</template>
			{{other.goodSum}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<user />
					</el-icon>
					省会城市网格覆盖范围
				</div>
			</template>
			47.06%
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<user />
					</el-icon>
					大城市网格覆盖范围
				</div>
			</template>
			16.04%
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup>
	import {
		inject
	} from 'vue';
	import {
		reactive,
		ref
	} from 'vue';
	const axios = inject("axios");
	const other = ref({});

	function loadData() {
		let url = "/api/statistic/other";
		axios.get(url).then((r) => {
			if (r.data.ok) {
				other.value = r.data.data.other;
			}
		})
	}
	loadData();
</script>

<style scoped>
	.margin-top {
		margin-top: 20px;
		width: 50%;
	}
</style>